<template>
    <div id="index" ref="appRef">
        <div class="bg">
            <dv-loading v-if="loading">Loading...</dv-loading>
            <div v-else class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 class="dv-dec-10" />
                    <div class="d-flex jc-center">
                        <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
                        <div class="title">
                            <span class="title-text">汾阳高危患者</span>
                            <dv-decoration-6
                                class="dv-dec-6"
                                :reverse="true"
                                :color="['#50e3c2', '#67a1e5']"
                            />
                        </div>
                        <dv-decoration-8
                            class="dv-dec-8"
                            :reverse="true"
                            :color="decorationColors"
                        />
                    </div>
                    <dv-decoration-10 class="dv-dec-10-s" />
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex aside-width">
                        <div class="react-left ml-4 react-l-s">
                            <span class="react-before"></span>
                            <span class="text" @click="goToHomePage">返回首页</span>
                            <span class="text" @click="goToPuJiangWardPage">浦江</span>
                        </div>
                        <div class="react-left ml-3" style="width:260px;">
                            <span class="text">{{ subtitle[1] }}</span>
                        </div>
                    </div>
                    <div class="d-flex aside-width">
                        <div class="react-right mr-3" style="background-color: #0f1325;width:250px;">
                            <span class="text fw-b">{{ subtitle[2] }}</span>
                        </div>
                        <div class="react-right mr-4 react-l-s">
                            <span class="react-after"></span>
                            <span class="text">
                                {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
                                {{ timeInfo.dateDay }}
                            </span>
                        </div>
                    </div>
                </div>
                <!-- 添加了滚动功能的内容区域 -->
                <div class="body-box scrollable-content">
                    <div class="WardBox">
                        <WardView
                            v-for="dept in filteredDepartments"
                            :key="dept.deptName"
                            :title="dept.deptName"
                            :dept-data="getDeptData(dept.deptName)"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, computed } from "vue";
import { formatTime } from "@/utils/index";
import { WEEK } from "@/constant/index";
import useDraw from "@/utils/useDraw";
import { title, subtitle, moduleInfo } from "@/constant/index";
import WardView from "./WardView.vue";
import axios from "axios";

export default defineComponent({
    components: {
        WardView
    },
    setup() {
        // * 颜色
        const decorationColors = ["#568aea", "#000000"];
        // * 加载标识
        const loading = ref<boolean>(true);
        // * 时间内容
        const timeInfo = reactive({
            setInterval: 0,
            dateDay: "",
            dateYear: "",
            dateWeek: "",
        });

        // 数据存储
        const fullStatistics = ref<any[]>([]);
        const departmentsOnly = ref<any[]>([]);

        // 过滤后的科室列表（排除空名称）
        const filteredDepartments = computed(() => {
            return departmentsOnly.value.filter(dept => 
                dept.deptName && dept.deptName.trim() !== ""
            );
        });

        // * 适配处理
        const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();

        // 获取指定科室的数据
        const getDeptData = (deptName: string) => {
            return fullStatistics.value
                .filter(item => item.deptName === deptName)
                .map(item => ({
                    name: item.iiiDataType,
                    value: Number(item.number) // 转换为数字类型
                }));
        };

        // 生命周期
        onMounted(async () => {
            await fetchData();
            cancelLoading();
            handleTime();
            windowDraw();
            calcRate();
        });

        onUnmounted(() => {
            unWindowDraw();
            clearInterval(timeInfo.setInterval);
        });

        // 从接口获取数据
        const fetchData = async () => {
            try {
                const response = await axios.get(
                     window.globalConfig.baseApi +"/api/Nurse/GetAllStatisticsDataByDeptJson?IDataType=2&dbKey=dbFY"
                );
                const data = response.data;
                fullStatistics.value = data.fullStatistics || [];
                departmentsOnly.value = data.departmentsOnly || [];
            } catch (error) {
                console.error("获取数据失败:", error);
            }
        };

        // 处理 loading 展示
        const cancelLoading = () => {
            setTimeout(() => {
                loading.value = false;
            }, 500);
        };

        // 处理时间监听
        const handleTime = () => {
            timeInfo.setInterval = window.setInterval(() => {
                const date = new Date();
                timeInfo.dateDay = formatTime(date, "HH: mm: ss");
                timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
                timeInfo.dateWeek = WEEK[date.getDay()];
            }, 1000);
        };

        return {
            loading,
            timeInfo,
            appRef,
            title,
            subtitle,
            moduleInfo,
            decorationColors,
            filteredDepartments,
            getDeptData
        };
    },
    methods: {
        goToHomePage() {
            this.$router.push({ name: "Index" });
        },
        goToPuJiangWardPage() {
            this.$router.push({ name: "PuJiangGWBR" });
        },
    },
});
</script>

<style lang="scss" scoped>
@import "../inpatientsDetailsCSS/FenYangWard.scss";

// 新增滚动相关样式
.scrollable-content {
    // 设置最大高度，超出部分可滚动
    max-height: 90%; // 根据实际页面布局调整
    overflow-y: auto;
    // 美化滚动条
    scrollbar-width: thin;
    scrollbar-color: #568aea #0f1325;
}

// WebKit 浏览器滚动条样式
.scrollable-content::-webkit-scrollbar {
    width: 6px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #0f1325;
    border-radius: 3px;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background-color: #568aea;
    border-radius: 3px;
}

// 确保内容区域有足够的内边距，避免内容紧贴边缘
.body-box {
    padding-bottom: 20px;
}
</style>
